import React, { ReactNode } from 'react';
import { Box, NotificationBanner } from '@nova-hf/ui';
import {
  serviceDetailStatusMap,
  serviceIconMap,
  serviceStatusColorIconMap,
} from 'beta/utils/helpers';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useServiceQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

export const ServiceStatus = () => {
  const { t } = useTranslation('services');
  const router = useRouter();
  const { data, loading, error } = useServiceQuery({
    variables: {
      serviceId: (router.query.serviceId as string) ?? '',
    },
  });

  const service = data?.service;
  const serviceLayout = serviceStatusColorIconMap(data?.service?.status);
  const detailStatus = serviceDetailStatusMap(data?.service);

  if (
    !data ||
    error ||
    !service ||
    detailStatus === 'unknown' ||
    service.__typename !== 'MobileService'
  ) {
    return <Box padding={30}>Something went wrong!</Box>;
  }

  if (loading) {
    return <Box padding={30}>Loading.....</Box>;
  }

  return (
    <Box marginBottom={10}>
      <NotificationBanner
        icon={serviceIconMap(service?.type) ?? 'click'}
        eyebrowText={t(`status.mainStatus.${service.status}`)}
        title={t(`status.detailStatus.${detailStatus.status}.title`)}
        color={serviceLayout.color}
        hasPingAlert
        {...(t(`status.detailStatus.${detailStatus.status}.buttonText`) !== '' && {
          mainButtonWhite: {
            renderAs: 'a',
            text: t(`status.detailStatus.${detailStatus.status}.buttonText`),
            icon: 'longArrowRight',
            wrapper: (link: ReactNode) => (
              <Link
                href={t(`status.detailStatus.${detailStatus.status}.buttonHref`)}
                passHref
                legacyBehavior
              >
                {link}
              </Link>
            ),
          },
        })}
      />
    </Box>
  );
};